<section id="jwk-park-config" class="ml-24 mr-24 pb-20">
	<hl-page-header title="办公租赁-园区配置"></hl-page-header>
	<div class="dy-flex mt-10 hl-scroll-container global_table border" ref="vs">
		<div style="width: 785px;">
			<vue-scroll :ops="ops" ref="scrollWrap" @handle-scroll="handleComplete">
				<div class="dy-flex config-table-title-wrap" style="width: 950px;">
					<div class="dy-fx-1 config-table-title-item global_table_title">序</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">园区名称</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">区域</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">详细地址</div>
					<div class="dy-fx-2 config-table-title-item global_table_title">交通</div>
					<div class="dy-fx-2 config-table-title-item global_table_title">停车费(元/月)</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">配套</div>
					<div class="dy-fx-2 config-table-title-item global_table_title">状态</div>
				</div>
				<div class="dy-flex line-height-40 text-center table-padding-4 global_table_item" style="width: 950px;"
					v-for="(item,index) in dataList" @mouseenter="rowIndex = index" @mouseleave="rowIndex = null" :class="{hoverColor:rowIndex == index}">
					<div class="dy-fx-1 ellipsis-1">{{index+1}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.name}}</div>
					<div class="dy-fx-3 ellipsis-1 ">{{item.city + item.district}}</div>
					<div class="dy-fx-3 ellipsis-1 ">{{item.address}}</div>
					<div class="dy-fx-2 ellipsis-1 ">{{item.trafficInfo}}</div>
					<div class="dy-fx-2 ellipsis-1 ">{{item.parkingPrice}}</div>
					<div class="dy-fx-3 ellipsis-1 ">{{item.mating.join(';')}}</div>
					<div class="dy-fx-2 ellipsis-1 ">{{item.isValid == 0?'停用':'启用'}}</div>
				</div>
			</vue-scroll>
		</div>
		<div class="border-l text-center line-height-40 dy-fx-1">
			<div class="border-b" style="background-color: #F0F2FF;color: #A5AAB7;line-height: 39px;">操作</div>
			<div></div>
			<div class="global_table_item" v-for="(item,index) in dataList" @mouseenter="rowIndex = index" @mouseleave="rowIndex = null" :class="{hoverColor:rowIndex == index}">
				<a href="javascript:;" @click="setState(item)">{{item.isValid == 1?'停用':'启用'}}</a>
				<a href="javascript:;" @click="goToedit(item.id)">编辑</a>
				<a href="javascript:;" @click="delItem(item.id)">删除</a>
			</div>
		</div>
	</div>

	<div class="mt-15">
		<hl-button @on-click="addParkBut">新增园区</hl-button>
	</div>

	<hl-dialog :visible="isShowDialog" :title="text" @on-close="isShowDialog = !isShowDialog">
		<div class="dy-flex">
			<div class="dy-fx-1 line-height-34">园区：</div>
			<div class="dy-fx-6">
				<input type="text" class="form-control" style="width: 310px;" v-model="addParkItem.name">
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">区域：</div>
			<div class="dy-fx-6">
				<hl-select :data="cityData" type="primary" width="126" v-model="addParkItem.city_code"
					@on-change="selectCityCode"></hl-select>
				<hl-select :data="setCountyData" type="primary" width="126" v-model="addParkItem.district_code"
					@on-change="selectCountyCode"></hl-select>
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">详细地址：</div>
			<div class="dy-fx-6">
				<input type="text" class="form-control" style="width: 310px;" v-model="addParkItem.address">
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34"></div>
			<div class="dy-fx-6">
				<!-- map -->
				<div id="mapGaode" style="width: 390px;height: 230px;" v-show="!manualFlag"></div>
				<div id="newGaode" style="width: 390px;height: 230px;" v-show="manualFlag"></div>
				<div class="mt-10">
					<hl-button @on-click="showNewMap" v-if="!manualFlag">手动定位</hl-button>
					<hl-button @on-click="newMap" v-if="!manualFlag">更新定位</hl-button>
					<hl-button @on-click="usePosition" v-if="manualFlag">使用当前定位</hl-button>
					<hl-button @on-click="hideNewMap" v-if="manualFlag">取消</hl-button>
				</div>
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">交通：</div>
			<div class="dy-fx-6">
				<input type="text" class="form-control" style="width: 310px;" v-model="addParkItem.traffic_info">
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">停车费：</div>
			<div class="dy-fx-6 dy-flex" style="align-items: center">
				<input type="number" class="form-control" style="width: 310px;" v-model="addParkItem.parking_price"><span class="ml-10">元/月</span>
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">配套：</div>
			<div class="dy-fx-6">
				<ul class="clearfix mathing-config">
					<li v-for="item in matingData" @click="selectMating(item.dictCode)"
						:class="{active:selectMatingCode.includes(item.dictCode)}">{{item.dictName}}</li>
				</ul>
			</div>
		</div>
		<div slot="footer">
			<hl-button type="primary" @on-click="sureAdd">确认</hl-button>
			<hl-button type="outline" @on-click="isShowDialog = !isShowDialog">取消</hl-button>
		</div>
	</hl-dialog>




</section>

<style type="text/css">
	.table-padding-4>div {
		padding: 0 4px;
	}

	.mathing-config li {
		width: 110px;
		height: 36px;
		line-height: 36px;
		box-sizing: border-box;
		border: 1px solid #666;
		float: left;
		margin-right: 12px;
		margin-bottom: 10px;
		text-align: center;
		cursor: pointer;
		background: #fff;
	}

	.mathing-config li.active {
		background: #565E99;
		border-color: #565E99;
		color: #fff;
	}

	.amap-icon img {
		width: 25px;
		height: 34px;
	}

	.amap-logo,
	.amap-copyright {
		display: none !important;
	}
	.global_table_item a{
		margin-right: 5px;
	}
	.hoverColor{
		background-color: #F0F0F7!important
	}
	/*添加css样式*/
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
			-webkit-appearance: none;
	}

	input[type="number"] {
			-moz-appearance: textfield;
	}
</style>

<script src="modules/jwk/scripts/jwk_park_config.js" charset="utf-8"></script>
